<template>
  <div class="score-staff-block">
    <!-- 单声部：只渲染一行 -->
    <template v-if="scoreType === '单声部'">
      <div class="staff-row right-hand">
        <!-- 右手内容后续实现 -->
        <span class="staff-label">右手</span>
      </div>
    </template>
    <!-- 双声部：渲染两行并用大括弧包裹 -->
    <template v-else-if="scoreType === '双声部'">
      <div class="grand-staff">
        <svg class="grand-brace" width="24" height="120">
          <!-- 大括弧SVG路径，后续可美化 -->
          <path d="M20,10 Q2,60 20,110" stroke="#222" stroke-width="2" fill="none"/>
        </svg>
        <div class="staff-rows">
          <div class="staff-row right-hand">
            <span class="staff-label">右手</span>
          </div>
          <div class="staff-row left-hand">
            <span class="staff-label">左手</span>
          </div>
        </div>
      </div>
    </template>
    <!-- 其他类型可扩展 -->
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'ScoreStaffBlock',
  computed: {
    ...mapGetters(['scoreDraft']),
    scoreType() {
      return this.scoreDraft.scoreType
    }
  }
}
</script>
<style scoped>
.score-staff-block {
  width: 100%;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.staff-row {
  min-height: 48px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  margin-left: 32px;
  font-size: 14px;
}
.staff-label {
  color: #888;
  margin-right: 12px;
}
.grand-staff {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.grand-brace {
  margin-top: 0;
  margin-right: 4px;
  display: block;
}
.staff-rows {
  display: flex;
  flex-direction: column;
}
</style> 